<template>
	<div class="headerBox">
		<div class="logoBox" @click="gohome">
			<el-image :src="require('@/assets/img/logo.png')" style="width: 70px"></el-image>
		</div>
		<div class="menuBox">
			<el-menu :default-active="onRoutes" router background-color="rgba(255, 255, 255, 1.0)" text-color="#000000"
				active-text-color="#ff83ff" class="el-menu-demo" mode="horizontal">
				<el-menu-item index="mainhome">
					<el-image :src="require('@/assets/img/artl.png')"
						style="width: 25px;float: left;margin-right:0.1rem;margin-bottom:0.3rem"></el-image>文章
				</el-menu-item>
				<el-menu-item index="DictionaryManager">
					<el-image :src="require('@/assets/img/fm.png')"
						style="width: 25px;float: left;margin-right:0.1rem;margin-bottom:0.3rem"></el-image>留言
				</el-menu-item>
			</el-menu>
		</div>
		<div class="createBox">
			<el-dropdown @command="handleCommand">
				<div class="createB">				
						<el-image :src="require('@/assets/img/create.png')"
							style="width: 25px;float: left;margin-bottom:0.1rem"></el-image>					
				</div>

				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item command="addArticle">写文章</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>

		</div>
	</div>
</template>

<script>
	import {
		postRequest,
		putRequest,
		getRequest,
		deleteRequest
	} from "../utils/api";
	import {
		clearCookie,
		setCookie2,
		getCookie
	} from "../utils/cookie";
	export default {
		data() {
			return {
				isLogin: false,
				userName: "",
			}
		},

		created() {
			
		},

		computed: {
			onRoutes() {
				const _this = this;
				let currentRouter = _this.$route.path;
				setCookie2("currentRouter", currentRouter);
				return _this.$route.path.replace('/', '');
			}
		},

		methods: {
			gohome() {
				const _this = this;
				_this.$router.replace("/mainhome");
			},

			handleCommand(command) {
				const _this = this;
				let currentRouter = _this.$route.path.replace("/", "");
				if (command == "addArticle") {
					_this.$router.push("/addarticle");
					if (currentRouter == command) {
						return;
					}

				}
			},
		}
	}
</script>

<style lang="less" scoped>
	@import '../assets/css/theheader.css';
</style>
